<template>
	<div class="content">
		<div class="title">
			<div class="img">
				<img src="https://pinduoduoimg.yangkeduo.com/brand_creation/allowancenew_icon.png?imageView2/2/w/66/q/80" alt="">
			</div>
			<span class="L0">百亿补贴</span> | <span class="L1">大牌正品 官方补贴</span> <span class="L2" @click="tiaozhuan">查看更多 > </span>
		</div>
			<div class="list" v-for="item in butie" :key="item.img_url" @click="handleGoodsInfo">
				<img :src="item.img_url" alt="" />
				<div class="move">{{ item.title }}</div>
				<div class="wenzi"><span>已补贴￥{{ item.butie }}元</span></div>
			</div>
	</div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
	data(){
		return {
			butie:[]
		}
	},
	created() {
		this.getbutie()
	},
	methods:{
		tiaozhuan(){
			Toast('该功能正在完善中')
		},
		getbutie(){
			this.$http.get('src/data/baiyibutie.json').then(result=>{
				if(result.body.status ===0){
					this.butie = result.body.message
				}
			})
		},
		handleGoodsInfo() {
			Toast('该功能正在完善中')
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	background-color: #fff;
	position: relative;
	.title{
		.img{
			width: 1.4375rem;
			height: 1.4375rem;
			display: inline-block;
			padding-left: 0.3125rem;
			padding-top: 0.3125rem;
			img{
				width: 100%;
			}
		}
		.L0{
			font-weight: 800;
		}
		.L1{
			font-size: 0.8125rem;
			color: pink;
		}
		.L2{
			font-size: 0.8125rem;
			color: red;
			position: absolute;
			left: 18.75rem;
			top: 0.625rem;
		}
	}
		.list {
			display: inline-block;
			width: 24%;
			.move{
				position: absolute;
				bottom: 1.25rem;
				font-size: 0.8125rem;
				color: white;
				background-color: #00ffff;
			}
			.wenzi{
				font-size: 0.75rem;
				color: red;
			}
			img{
				width: 100%;
			}
		}
	
}
</style>
